今天來做一個popup的UI
pop-up常見的就是彈出式廣告，
雖然造成許多困擾，但是還是來練習做做看。

<div>
  <button class="buttonClick">Click me</button>
</div>
<div class="ui-popup">
  <h2>Popup Window</h2>
  <p>This is Popup window.</p>
  <div class= "popup-button">
    <button class="popup-accept">ACCEPT</button>
    <button class="popup-decline">DECLINE</button>
  </div>
</div>

.buttonClick {
  display: inline-block;
  background-color: #ff0000;
  width: 150px;
  height: 50px;
  font-size: 24px;
  border-radius: 5px;
  // 按鈕的樣式
}

.ui-popup {
  border: solid 1px;
  border-radius: 5px;
  width: 600px;
  height: 300px;
  background-color: #fff;
  text-align: center;
  //整個pop-up區域的樣式。
}
.popup-button {
  height: 170px;
}
.popup-button-default {
  font-size: 24px;
  color: #fff;
  width: 150px;
  height: 50px;
  margin: 50px;
  border-radius: 5px;
  //pop-up內，按鈕預設的樣式。
}
.popup-accept {
  .popup-button-default;
  background-color: #00ff00;
  //用Less中的mixin，把按鈕的預設加到各個按鈕內。
}
.popup-decline {
  .popup-button-default;
  background-color: #ff0000;
}

但是我希望他一開始不要顯示是，
而是在我click後才跳出，
所以先加上display: none
便會隱藏起來。
接著我想pop-up在我按下按鈕後可以顯示

$('.buttonClick').click(function() {
  $('.ui-popup').css('display', 'block');
} );  //按下button後，將ui=popup的display樣式改為block

pop-up的區塊就會在下方顯示了。
接著我想讓pop-up可以在我點擊了accept或是decline後消失

$('.popup-accept').click(function() {
  $('.ui-popup').hide('slow', function() {
  } );
} );
$('.popup-decline').click(function() {
  $('.ui-popup').hide('fast', function() {
  } );
} );  //點擊accept或是decline後，pop-up會隱藏起來，與前一次不同的是，這邊用.hide方式來寫，會有消失的動畫。

code pen